<script setup>
	// 了解
	import { storeToRefs } from 'pinia'
	//  1. 导入 count-store 函数
	import { useCountStore } from '@/stores/count.js'
	// 2.  获取 store
	const store = useCountStore()
	//  问题：解构 store 中的数据，会失去响应式
	// const { count } = store
	// 解决：使用storeToRefs解构
	const { count } = storeToRefs(store)
	console.log('count-store:', store, count)
</script>
<template>
	<view class="counter">
		<button @click="store.sub" class="button" type="primary">-</button>
		<!-- <input v-model="store.count" class="input" type="text" /> -->
		<input v-model="count" class="input" type="text" />
		<button @click="store.add" class="button" type="primary">+</button>
	</view>
	<button @click="store.asyncReset" class="button" type="primary">reset</button>
</template>

<style lang="scss" scoped>
	.counter {
		display: flex;
		padding: 100rpx;
	}

	.input {
		flex: 1;
		height: 96rpx;
		text-align: center;
		border: 2rpx solid #eee;
		box-sizing: border-box;
	}

	.button {
		width: 100rpx;
		margin: 0;

		&:first-child {
			border-start-end-radius: 0;
			border-end-end-radius: 0;
		}

		&:last-child {
			border-start-start-radius: 0;
			border-end-start-radius: 0;
		}
	}
</style>